import* as React from "react";
import type { ProColumns } from '@ant-design/pro-components';
import {EditableProTable} from '@ant-design/pro-components';

import { createElement } from "react";
import { Table, Button, Input, Switch, Space, Form, Modal, InputNumber,Row, Divider } from "antd";
import { SearchOutlined, ReloadOutlined, EditOutlined, DeleteOutlined, FolderOpenOutlined } from "@ant-design/icons";


export interface WarehouseTableProps {
  name: string;
}

const WarehouseTable: React.FC<WarehouseTableProps> = function WarehouseTable({name,...otherProps}) {
  const [searchTerm, setSearchTerm] = React.useState("");
  const [form] = Form.useForm();
  const {TextArea} = Input;

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
    
  

 

  const [dataSource, setDataSource] = React.useState([
    {
      key: "1",
      code: "WH629",
      name: "线边库-虚拟",
      location: "",
      area: "2㎡",
      person: "22",
      frozen: false,
      note: "是",
    },
    {
      key: "2",
      code: "WH596",
      name: "朝阳虚拟仓",
      location: "市中心",
      area: "1000㎡",
      person: "",
      frozen: false,
      note: "是",
    },
    // 添加其他数据...
  ]);

  const columns = [
    {
      title: "仓库编号",
      dataIndex: "code",
      key: "code",
      render: (text:string) => <a style={{ color: "#1890ff" }}>{text}</a>,
    },
    {
      title: "仓库名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "位置",
      dataIndex: "location",
      key: "location",
    },
    {
      title: "面积",
      dataIndex: "area",
      key: "area",
    },
    {
      title: "负责人",
      dataIndex: "person",
      key: "person",
    },
    {
      title: "是否冻结",
      dataIndex: "frozen",
      key: "frozen",
      render: (text, record) => <Switch checked={record.frozen} />,
    },
    {
      title: "备注",
      dataIndex: "note",
      key: "note",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a href="#"><FolderOpenOutlined /> 库区</a>
          <a href="#"><EditOutlined /> 修改</a>
          <a href="#" style={{ color: "red" }}><DeleteOutlined /> 删除</a>
        </Space>
      ),
    },
  ];

  const handleSearch = () => {
    // 假设我们做一个简单的搜索，只搜索 `code` 或 `name` 字段
    const filteredData = dataSource.filter(
      (item) =>
        item.code.includes(searchTerm) || item.name.includes(searchTerm)
    );
    setDataSource(filteredData);
  };

  const resetSearch = () => {
    setSearchTerm("");
    // 这里恢复初始数据
    setDataSource([
      {
        key: "1",
        code: "WH629",
        name: "线边库-虚拟",
        location: "",
        area: "2㎡",
        person: "22",
        frozen: false,
        note: "是",
      },
      {
        key: "2",
        code: "WH596",
        name: "朝阳虚拟仓",
        location: "市中心",
        area: "1000㎡",
        person: "",
        frozen: false,
        note: "是",
      },
      // 添加其他数据...
    ]);
  };

  return (
    <div>
      {/* 搜索框区域 */}
      <Row>
         <Space style={{ marginBottom: 16 , marginTop: 20,marginLeft: 20}}>
        <Input
          placeholder="请输入仓库编号或名称"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          style={{ width: 200 }}
        />
        <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
          搜索
        </Button>
        <Button icon={<ReloadOutlined />} onClick={resetSearch}>
          重置
        </Button>
        
        
       
      </Space>
      </Row>
      <Divider />
      <Row>
        <Space style={{ marginBottom: 16 , marginTop: 20,marginLeft: 20}}>
        
        <Form form={form} name="InsertForm" layout="inline" onFinish={onFinish}>
          <Form.Item name="code">
            <Input placeholder="仓库编号"/>
          </Form.Item>
          <Form.Item name="name">
            <Input placeholder="仓库名称"/>
          </Form.Item>  
          <Form.Item name="location">
            <Input placeholder="仓库地址" />
          </Form.Item>
          <Form.Item name="size">
            <InputNumber placeholder="仓库面积" />
          </Form.Item>
          <Form.Item name="note">
            <TextArea rows={2} placeholder="备注" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" >+ 新增</Button>
          </Form.Item>
        </Form>
      </Space>
      </Row>
      <Divider />
     
      

      

      {/* 表格区域 */}
      <Table
        dataSource={dataSource}
        columns={columns}
        rowSelection={{ type: "checkbox" }}
      />
      
    </div>
  );
};

WarehouseTable.displayName = "WarehouseTable";
export default WarehouseTable;

